Media Queries Example Prep

Adding Media Queries in Code

Media queries are used to set different style rules for different devices or sized screens. We use breakpoints to set the condition of a media query. The logic is:

@media(feature:value)

Here media features are aspects of the device that our media (website) is being viewed on. The media feature we are most interested in for this lesson is width, which allows us to evaluate the viewport width of the browser and set conditions based on that evaluation. We actually write this feature min-width (or max-width) because width is one of many media features that are range features, which means they can be prefixed with min- or max- to express constraints, which is what we're looking for with our breakpoints! If the constraint of the breakpoint (viewport width being in the range below our breakpoint) is broken (the width is larger than the breakpoint) the new CSS rule takes effect. Here is an example of how that could look in action:

@media(min-width:900px) {
  body{
   background:red;
 }
}

In this example if the viewport width is greater than 900px the background of the webpage would turn red.

ND001 C01 L05 04 Media Queries Example

Media Queries Example Summary

Media queries are used to create responsive layouts using breakpoints. Below is an example of the syntax that is used for creating media queries:

@media(min-width:1100px) {
  body{
    font-size: 27px;
  }
}

In the example above, if the browser width of the webpage being viewed is above 1100px wide, then the font-size would become 27px.

Media Queries Graphic

Media queries can help change the layout for different screen sizes

Media Queries Quiz

Which of the following is the correct syntax for media queries with a responsive breakpoint?

@media(width:800px) {
  .container {
    border: 2px solid blue;
  }
}

@media(min-width:800px) {
  .container {
    border: 2px solid blue;
  }
}

media(min-width:800px) {
  .container {
    border: 2px solid blue;
  }
}

SOLUTION:

```javascript @media(min-width:800px) { .container { border: 2px solid blue; } } ```